import {Avatar, Drawer, Dropdown, MenuProps, message, Popconfirm,} from "antd";
import {UserOutlined} from "@ant-design/icons";
import React, {useState} from "react";
import UserInfo from "@/app/components/home/userinfo";
import WorkInfo from "@/app/components/home/workinfo";
import {clearStorage, loginUrl} from "@/app/lib/security";
import {getFetch} from "@/app/lib/HttpProtocol";
import {useRouter} from "next/navigation";
import SelfChangePasswordForm from "@/app/components/home/SelfChangePasswordForm";
const apis = {
  logoutUrl:'/auth/logout',
}

export default function UserBar(){
    const [drawerStatus,setDrawerStatus] = useState([false,false]);
    function changeDrawerStatus(index:number,status:boolean){
        drawerStatus[index] = status;
        setDrawerStatus([...drawerStatus])
    }
    let router = useRouter();
    function signOut(){
        getFetch(apis.logoutUrl,null).then(data => {
            clearStorage();
            message.info("退出成功");
            router.push(loginUrl)
        }).catch(e => {

        })
    }
    let items:MenuProps['items'] = [
        {
            key: '个人资料',
            label: (
                <p onClick={() => changeDrawerStatus(0,true)}>个人资料</p>
            ),
        },{
            key: '修改密码',
            label: (
                <p onClick={() => changeDrawerStatus(1,true)}>修改密码</p>
            ),
        },{
            key: '退出',
            label: (
              <Popconfirm
                title={"退出"}
              description="确定退出吗?"
              onConfirm={signOut}
              okText="Yes"
              cancelText="No"
             >
                <p style={{textAlign:"center"}}>退出</p>
              </Popconfirm>
            ),
        }];
    return (
        <>
      <Dropdown menu={{ items }} placement="bottom" arrow>
          <Avatar size={40} style={{ backgroundColor: '#87d068' ,cursor:"pointer"}} icon={<UserOutlined />} />
      </Dropdown>
      {!drawerStatus[0] ? <></> :
        <Drawer title={"个人资料"} onClose={()=>changeDrawerStatus(0,false)} open={true} key={"personalInfo"} closable={false}>
          <UserInfo></UserInfo>
          <WorkInfo></WorkInfo>
        </Drawer>
      }
          {!drawerStatus[1] ? <></> :
            <Drawer onClose={()=>changeDrawerStatus(1,false)} open={true} closable={false} title={"修改密码"}>
              <SelfChangePasswordForm onComplete={()=>changeDrawerStatus(1,false)}/>
            </Drawer>
          }
        </>

  ) ;
}